{extend name="public/iframe" /}
{block name="top"}

{/block}
{block name="content"}
<div class="card card-custom-tabs">
    <div class="card-header d-flex flex-column flex-nowrap bg-card-header">
        <h5 class="card-title d-flex flex-column">
            <span class="fs-6 fw-bolder">
                {switch name="type"}
                {case value="datetime"}选择预约的时间{/case}
                {case value="date"}选择预约的日期{/case}
                {case value="time"}选择预约的时间点{/case}
                {/switch}
            </span>
        </h5>
        {eq name="type" value="datetime"}
        <div class="header-toolbar">
            <ul class="nav nav-tabs border-bottom-0 w-100 fs-6  d-flex flex-nowrap text-nowrap">
                {foreach name="times" key="k" item="time"}
                <li class="nav-item">
                    <a class="nav-link {eq name='k' value='0'}active{/eq}" data-bs-toggle="tab" href="#tab{$k}">{$time.text}</a>
                </li>
                {/foreach}
            </ul>
        </div>
        {/eq}
    </div>
    <div class="card-body">
        <div class="tab-content">
            {eq name="type" value="datetime"}
            {foreach name="times" key="kk" item="tt"}
            <div class="tab-pane fade {eq name='kk' value='0'}active show{/eq}" id="tab{$kk}" role="tabpanel">
                <div class="">
                    {foreach name="tt.times" item="ttt"}
                    <span class="badge badge-light-primary p-4 m-2 fs-3 bg-hover-primary text-hover-white order-time" data-value="{$ttt.value}">{$ttt.text}</span>
                    {/foreach}
                </div>
            </div>
            {/foreach}
            {/eq}
            {eq name="type" value="date"}
            <div class="tab-pane fade active show" id="tab1" role="tabpanel">
                <div class="">
                    {foreach name="times" item="tt"}
                    <span class="badge badge-light-primary p-4 m-2 fs-3 bg-hover-primary text-hover-white order-time" data-value="{$tt.value}">{$tt.text}</span>
                    {/foreach}
                </div>
            </div>
            {/eq}
            {eq name="type" value="time"}
            <div class="tab-pane fade active show" id="tab1" role="tabpanel">
                <div class="">
                    {foreach name="times" item="tt"}
                    <span class="badge badge-light-primary p-4 m-2 fs-3 bg-hover-primary text-hover-white order-time" data-value="{$tt.value}">{$tt.text}</span>
                    {/foreach}
                </div>
            </div>
            {/eq}
        </div>
    </div>
</div>
{/block}
{block name="bottom"}

{:load_module_assets()}
<script>
    var field = '{$field|default="reach_time"}';
    $(function(){
        $('.order-time').click(function(){
            var value = $(this).data('value') || '';
            if(!value){
                myadmin.notice('还未选择时间','warning');
                return;
            }

            parent.$('#'+field).val(value);
            parent.layer.closeAll();
        });
    })
</script>
{/block}